<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Artalk DEMO</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
    />
    <meta name="referrer" content="no-referrer" />
    <style>
      * {
        box-sizing: border-box;
        font-family:
          SF Pro Display,
          PingFang SC,
          Hiragino Sans GB,
          Microsoft YaHei,
          Roboto,
          Noto Sans CJK SC,
          sans-serif;
      }
      body {
        padding: 45px 10px;
        margin: 0;
        background: #f4f4f4;
      }
      body.dark-mode {
        background: #000;
      }
      .card {
        margin: 0 auto;
        max-width: 700px;
        position: relative;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        border: 1px solid transparent;
      }
      body.dark-mode .card {
        background: #1e2223;
        border: 1px solid #2d3235;
      }
      .card:not(:last-child) {
        margin-bottom: 10px;
      }
      .card.billboard {
        text-align: center;
      }
      .title > a {
        display: block;
        text-decoration: none;
        color: #0083ff;
        font-size: 35px;
        margin-top: 0;
        margin-bottom: 10px;
      }
      .title > a:hover {
        margin-left: 0;
      }
      .title > a > span {
        opacity: 0;
      }
      .title > a:hover > span {
        opacity: 1;
      }
      .desc {
        font-size: 12px;
        color: #697182;
      }
      body.dark-mode .desc {
        color: #848da3;
      }
      .social {
        margin-top: 20px;
      }
      .social > a:not(:last-child) {
        margin-right: 2px;
      }
      @media only screen and (max-width: 768px) {
        body {
          padding: 0;
          background: #fff;
        }
        .card.billboard {
          padding-top: 20px;
        }
        .card {
          width: 100%;
          padding: 5px;
        }
      }
      .float-btn {
        user-select: none;
        bottom: 25px;
        display: block;
        cursor: pointer;
        text-align: center;
        width: 60px;
        height: 37px;
        line-height: 37px;
        font-size: 13px;
        color: #757e91;
        background: #fff;
        opacity: 0.8;
        border-radius: 4px;
        border: 1px solid #eceff2;
        position: fixed;
      }
      .to-night {
        z-index: 99999;
        left: 25px;
        background: #1e2223;
        color: #fff;
      }
      body.dark-mode .to-night {
        background: #006fd9;
        border: 1px solid #2d3235;
        color: #fff;
      }
      .to-top {
        right: 25px;
      }
    </style>

    <!-- For mobile testing -->
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      // VConsole will be exported to `window.VConsole` by default.
      if (navigator.userAgentData.mobile) {
        var vConsole = new window.VConsole()
      }
    </script>
  </head>
  <body>
    <div class="card billboard atk-fade-in">
      <div class="title">
        <a href="https://github.com/ArtalkJS/Artalk" target="_blank">
          <span>『</span>
          Artalk
          <span>』</span>
        </a>
      </div>
      <div class="desc">
        一款简洁的自托管评论系统
        <span id="ArtalkPV"></span>
        |
        <span id="ArtalkCount"></span>
        <div class="artalk-page-vote">
          <span class="artalk-page-vote-up"
            >赞同 (<span class="artalk-page-vote-up-count"></span>)</span
          >
          <span class="artalk-page-vote-down"
            >反对 (<span class="artalk-page-vote-down-count"></span>)</span
          >
        </div>
      </div>
      <div class="social">
        <a
          href="https://www.npmjs.com/package/artalk"
          aria-label="npm package version"
          target="_blank"
        >
          <img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square" />
        </a>
        <a
          href="https://www.npmjs.com/package/artalk"
          aria-label="npm package download number"
          target="_blank"
        >
          <img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square" />
        </a>
        <a
          href="https://github.com/ArtalkJS/Artalk/commits/master"
          aria-label="last commit"
          target="_blank"
        >
          <img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square" />
        </a>
        <a
          href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE"
          aria-label="open source license"
          target="_blank"
        >
          <img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square" />
        </a>
        <a
          href="https://github.com/ArtalkJS/Artalk"
          aria-label="GitHub star number"
          target="_blank"
        >
          <img src="https://img.shields.io/github/stars/ArtalkJS/Artalk?style=flat-square" />
        </a>
      </div>
    </div>
    <div class="card atk-fade-in">
      <div id="comments"></div>
    </div>
    <div class="float-btn to-night atk-fade-in">Blink</div>
    <div class="float-btn to-top atk-fade-in" style="display: none">TOP</div>

    <script type="module">
      import Artalk from './src/main'
      var artalk = Artalk.init({
        el: '#comments',
        pageKey: 'https://artalk.js.org/guide/intro.html',
        pageTitle: 'Artalk Home',
        server: 'http://localhost:23366',
        site: 'ArtalkDocs',
      })

      window.artalk = artalk
      window.Artalk = Artalk
      ;(function () {
        const toTopElem = document.querySelector('.to-top')
        toTopElem.addEventListener('click', () => {
          window.scrollTo(0, 0)
        })

        checkShowToTop()
        document.addEventListener('scroll', () => {
          checkShowToTop()
        })

        function checkShowToTop() {
          const scrollTop = window.scrollY
          const whereShow = window.screen.height
          const isNeedShow = scrollTop > 0 && scrollTop > whereShow

          if (isNeedShow) {
            toTopElem.style.display = ''
          } else {
            toTopElem.style.display = 'none'
          }
        }
      })()
      ;(function () {
        // @Refer: https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers
        let darkMode = false

        if (getLS() == 'true') {
          darkMode = true
        } else {
          try {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
              darkMode = true
            }
          } catch {}
        }

        function getLS() {
          return localStorage.getItem('dark_mode_on') || null
        }

        function setLS(val) {
          return localStorage.setItem('dark_mode_on', String(val))
        }

        function checkAndApplyDarkMode() {
          artalk.setDarkMode(darkMode)
          if (darkMode) {
            document.body.classList.add('dark-mode')
          } else {
            document.body.classList.remove('dark-mode')
          }
        }

        checkAndApplyDarkMode()

        const toNightElem = document.querySelector('.to-night')
        toNightElem.addEventListener('click', () => {
          darkMode = !darkMode
          setLS(darkMode)
          checkAndApplyDarkMode()
        })

        // Listen
        try {
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            const newColorScheme = e.matches ? 'dark' : 'light'
            if (newColorScheme == 'dark') {
              darkMode = true
            } else {
              darkMode = false
            }

            checkAndApplyDarkMode()
          })
        } catch {}
      })()
    </script>
  </body>
</html>
